<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>index</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>

  <body>
    <div class="box">
      <img src="images/login.jpg" alt="每日推荐" title="每日推荐" />
      <div class="right">
        <ul class="tab_list">
          <li data-index="0">限时特惠</li>
          <li data-index="1">热卖推荐</li>
          <li data-index="2">人气新品</li>
          <li data-index="3">移动电源</li>
          <li data-index="4">充电器</li>
        </ul>
        <ul class="tab_con">
          <!-- <li>
            <img src="images/1/1.jpg" alt="" />
            <span class="names">OPPO Find X2 超感官旗舰 3K分辨率 120Hz超感屏 多焦段影像系统骁龙865 65w闪充 8GB+256GB</span>
            <span class="price">¥5999.00</span>
          </li> -->
          
        </ul>
      </div>
    </div>
    <script>
      //手机信息数组
      var conDate1 = {
        1: [
          "images/1/1.jpg",
          "OPPO Find X2 超感官旗舰 3K分辨率 120Hz超感屏 多焦段影像系统 骁龙865 65w闪充 8GB+256GB",
          "¥5999.00",
        ],
        2: [
          "images/1/2.jpg",
          "三星 Galaxy S10(SM-G9730)骁龙855超感屏 超声波屏下指纹 4G手机 全网通 双卡双待游戏手机 8GB+1",
          "¥4189.00",
        ],
        3: [
          "images/1/3.jpg",
          "OPPO Find X2 超感官旗舰 3K分辨率 120Hz超感屏 多焦段影像系统 骁龙865 65w闪充 8GB+256GB",
          "¥5999.00",
        ],
        4: [
          "images/1/4.jpg",
          "realme 真我X50 Pro 5G 6400万变焦四摄 双模5G 65W超级闪充 高通骁龙865 90Hz电竞屏 8GB+",
          "¥3599.00",
        ],
        5: [
          "images/1/5.jpg",
          "Apple iPhone XS (A2100)  256GB 银色 移动联通电信4G手机",
          "¥6499.00",
        ],
      };
      var conDate2 = {
        1: [
          "images/2/1.jpg",
          "诺基亚 NOKIA 5310 白红 直板按键 移动联通2G音乐手机 双卡双待 老人手机 学生备用功能机",
          "¥399.00",
        ],
        2: [
          "images/2/2.jpg",
          "魅族16T 三摄拍照大屏娱乐游戏手机 6GB+128G 日光橙 骁龙855 4500mAh大电池 超广角 全网通4G双卡双待",
          "¥1999.00",
        ],
        3: [
          "images/2/3.jpg",
          "Palm智能小手机  62克3.3英寸 IP68防水 移动联通电信 4G备用机 超薄迷你 典雅金",
          "¥1699.00",
        ],
        4: [
          "images/2/4.jpg",
          "OPPO Reno3 Pro 双模5G 视频双防抖 90HZ高感曲面屏 7.7mm轻薄机身 8GB+128GB 日出印象 拍照",
          "¥3999.00",
        ],
        5: [
          "images/2/5.jpg",
          "魅族 X8 拍照游戏智能手机 6GB+64GB 亮黑 AI美颜 骁龙710 全网通4G双卡双待",
          "¥1099.00",
        ],
      };
      var conDate3 = {
        1: [
          "images/3/1.jpg",
          "一加 OnePlus 8 5G旗舰新品 OLED高刷新率屏幕 骁龙865 轻薄手感 超清超广角拍照手机  肉眼可见的出类拔萃",
          "¥9999.00",
        ],
        2: [
          "images/3/2.jpg",
          "OPPO Reno3 双模5G 6400万超清四摄 视频双防抖 7.96mm纤薄机身  8GB+128GB 蓝色星夜全网通拍照",
          "¥3399.00",
        ],
        3: [
          "images/3/3.jpg",
          "realme 真我X50 6400万变焦四摄 双模5G 高通骁龙765G 120Hz电竞屏 前置双摄 8GB+128GB 冰川",
          "¥2499.00",
        ],
        4: [
          "images/3/4.jpg",
          "Palm智能小手机  62克3.3英寸 IP68防水 移动联通电信 4G备用机 超薄迷你 玄武灰",
          "¥1699.00",
        ],
        5: [
          "images/3/5.jpg",
          "Apple iPhone XS (A2100)  256GB 银色 移动联通电信4G手机",
          "¥6499.00",
        ],
      };
      var conDate4 = {
        1: [
          "images/4/1.jpg",
          "罗马仕LT20移动电源20000毫安大容量充电宝 智能数显苹果/安卓/Type-C/小米/华为通用 LT20数显2万毫安",
          "¥79.00",
        ],
        2: [
          "images/4/2.jpg",
          "小米 移动电源3 20000mAh USB-C 双向快充版|可为三台设备同时充电|高品质锂离子聚合物电池",
          "¥129.00",
        ],
        3: [
          "images/4/3.jpg",
          "第一卫(divi) 苹果7P/8P背夹电池 iPhone背夹充电宝大容量移动电源7/8plus充电手机壳轻薄便携7500毫安 黑色",
          "¥139.00",
        ],
        4: [
          "images/4/4.jpg",
          "罗马仕sense6+ 2万毫安时18WPD双向快充充电宝大容量移动电源Type-C输入输出苹果安卓小米手机通用",
          "¥124.90",
        ],
        5: [
          "images/4/5.jpg",
          "18W快充，双向快充，双口输出，高品质锂聚合物电芯【20000mAh双向快充,三台设备同时充电,更大电量点击】(此商品不参加上述活动)",
          "¥79.00",
        ],
      };
      var conDate5 = {
      1: [
        "images/5/1.jpg",
        "华为（HUAWEI）超级快充立式无线充电器（Max 40W）CP62 优雅黑 适配华为P40 Pro,P40 Pro+,Mat",
        "¥299.00",
      ],
      2: [
        "images/5/2.jpg",
        "摩设 苹果数据线手机快充头充电器线USB电源线iPhone11 pro/XS/MAX/6s/7/8P 两米线+12W快充头",
        "¥99.00",
      ],
      3: [
        "images/5/3.jpg",
        "MKY 苹果快充PD套装18W充电器头速冲数据线适用iphone11ProMax/8/X/XS/XR 18W快充头+苹果USB",
        "¥82.00",
      ],
      4: [
        "images/5/4.jpg",
        "倍思 【氮化镓GaN】65W快速充电器2C1A笔记本手机快充华为苹果充电器头PDQC多协议快充 【黑色】65W充电器+100W",
        "¥178.00",
      ],
      5: [
        "images/5/5.jpg",
        "小米 65W单USB-C口PD快充头/充电器/电源适配器| 体积小巧|手机与笔记本、switch皆适配",
        "¥99.00",
      ],
    };
      
      // 当前渲染的对象
      var currentObj = conDate1;
      // 初始化函数
      // obj 是形参
      function init(obj){
        var ul = document.getElementsByClassName("tab_con")[0];
        // 格式化ul列表，删除之前渲染的旧数据
        ul.innerHTML = "";
        // 遍历手机信息对象1  conDate1
        for (const key in obj) {
          const element = obj[key];
          // console.log(element[0]); // 图片路径
          // console.log(element[1]); // 商品名称
          // console.log(element[2]); // 价格

          // es6 新特性
          var str = `<img src="${element[0]}" alt="" />
                     <span class="names">${element[1]}</span>
                     <span class="price">${element[2]}</span>`;

          // 创建li节点
          var el_li = document.createElement("li");
          el_li.innerHTML = str;

          ul.appendChild(el_li);
        }
      }
      init(currentObj);

      // 将上面空参方法改为带参方法

      // 给分类添加交互
      // 事件委托
      function show(){
        var tab_list = document.getElementsByClassName("tab_list")[0];
        // mouseover 鼠标移入当前对象
        tab_list.addEventListener("mouseover",function(e){
          // 给当前元素设置样式
          //console.log(e.target);
          e.target.classList.add("listyle");

          // 更新分类下面的数据
          var index = e.target.getAttribute("data-index");
          if(index == 0){
            currentObj = conDate1;
          } else if(index == 1){
            currentObj = conDate2;
          } else if(index == 2){
            currentObj = conDate3;
          } else if(index == 3){
            currentObj = conDate4;
          } else if(index == 4){
            currentObj = conDate5;
          } else {

          }
          init(currentObj);
        });

        tab_list.addEventListener("mouseout",function(e){
          e.target.classList.remove("listyle");
        })
      }
      show();

    </script>
  </body>
</html>